<!-- footer -->
<style lang='scss' scoped>
   .nav-bar {
      position: fixed;
      width: 10rem;
      margin: 0 auto;
      bottom: -1px;
      left: 0;
      right: 0;
      height: 1.35rem;
      padding: .066667rem 0 0;
      background: #fff;
      overflow: hidden;
      clear: both;
      box-shadow: 0px 0px 20px -8px #999;
      display: flex;
      flex: 1;
      z-index: 5000;
      justify-content: flex-start;
      align-items: center;
      flex-direction: row;
      flex-wrap: nowrap;
      border-top: 1px solid #eee;
      .barIcon {
         width: 2.5rem;
         height: 100%;
         cursor: pointer;
         background: url('~assets/common/images/navbar.png') 0 0 no-repeat;
         background-size: 500% 120%;
      }
      .home {
         background-position: .47rem -0.1rem;
         &.active {
            background-position: -1.1rem -0.1rem;
         }
      }
      .commission {
         background-position: -2.63rem -0.1rem;
         &.active {
            background-position: -4.2rem -0.1rem;
         }
      }
      .cart {
         background-position: -5.8rem -0.1rem;
         &.active {
            background-position: -7.33rem -0.1rem;
         }
      }
      .myHome {
         background-position: -8.9rem -0.1rem;
         &.active {
            background-position: -10.46rem -0.1rem;
         }
      }
   }
</style>
<template>
   <ul class="nav-bar fool">
      <li :class="['barIcon','home',$route.name==='index'?'active':'']" @click="$router.push('/index')"></li>
      <li :class="['barIcon','commission',$route.name==='commission'?'active':'']" @click="$router.push('/commission')"></li>
      <li :class="['barIcon','cart',$route.name==='cart'?'active':'']" @click="$router.push('/cart')"></li>
      <li :class="['barIcon','myHome',$route.name==='myhome'?'active':'']" @click="$router.push('/myhome')"></li>
   </ul>
</template>

<script>
   export default {
      data() {
         return {

         };
      },

      watch: {},

      components: {},

      computed: {},

      methods: {},

      mounted: function () {}
   }
</script>